<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 2.为Echarts准备一个Dom -->
      <div class="id">
        <div id="main" style="width: 1600px; height: 400px"></div>
        <div id="main2" style="width: 800px; height: 400px;"></div>
        <div id="main3" style="width: 800px; height: 400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      //商品名称
      xdata: [],
      //商品销售数量
      ydata: [],
      //商品销售额
      zdata: [],
      //会员等级数据
      vipData: [],
      //会员性别数据
      vipGender: []
    }
  },
  created() {},
  // 此时,页面上的元素,已经被渲染完毕了
  async mounted() {
    // 3.基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    var myChart2 = echarts.init(document.getElementById('main2'))
    var myChart3 = echarts.init(document.getElementById('main3'))
    //网络请求获取报表数据
    const { data: res } = await this.$http.get('allOrder', {
      params: {
        query: '',
        pageNum: 1,
        pageSize: 10
      }
    })
    console.log(res)
    if (res.numbers < 1) return this.$message('获取折线图数据失败!')
    this.handleData(res.data, this.xdata, this.ydata, this.zdata)
    // 4.准备数据项和配置项
    // 指定图表的配置项和数据
    var option = {
      backgroundColor: '#080b30',
      title: {
        text: '商品销售图表',
        textStyle: {
          align: 'center',
          color: '#fff',
          fontSize: 20
        },
        top: '5%',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0, 255, 233,0)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(255, 255, 255,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(0, 255, 233,0)'
                }
              ],
              global: false
            }
          }
        }
      },
      grid: {
        top: '15%',
        left: '5%',
        right: '5%',
        bottom: '15%'
      },
      legend: {
        x: '77%',
        top: '10%',

        textStyle: {
          color: '#90979c',
          fontSize: 20
        },
        data: ['商品销售量', '商品销售额']
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            show: true
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: this.xdata
        }
      ],

      yAxis: [
        {
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 8,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#d1e6eb'
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '商品销售量',
          type: 'line',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 25,
          lineStyle: {
            normal: {
              color: '#cd796f',
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#cd796f'
            }
          },
          itemStyle: {
            color: '#cd796f',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(108,80,243,0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(108,80,243,0)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(108,80,243, 0.9)',
              shadowBlur: 20
            }
          },
          data: this.ydata
        },
        {
          name: '商品销售额',
          type: 'line',
          // smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: 'circle',
          symbolSize: 25,
          lineStyle: {
            normal: {
              color: '#00ca95',
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 5,
              shadowOffsetX: 5
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#00ca95'
            }
          },

          itemStyle: {
            color: '#00ca95',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(0,202,149,0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0,202,149, 0.9)',
              shadowBlur: 20
            }
          },
          data: this.zdata
        }
      ]
    }
    var vipNumData = [
      {
        name: '普通vip',
        value: 0
      },
      {
        name: '白银vip',
        value: 0
      },
      {
        name: '黄金vip',
        value: 0
      },
      {
        name: '钻石vip',
        value: 0
      },
      {
        name: '黑金vip',
        value: 0
      }
    ]
    var vipGenderData = [
      {
        name: '男',
        value: 0
      },
      {
        name: '女',
        value: 0
      }
    ]
    const { data: res2 } = await this.$http.get('allCustomers')
    for (let item of res2.data) {
      if (item.customer_vip_num < 888) {
        vipNumData[0].value++
      } else if (item.customer_vip_num < 2888) {
        vipNumData[1].value++
      } else if (item.customer_vip_num < 5888) {
        vipNumData[2].value++
      } else if (item.customer_vip_num < 8888) {
        vipNumData[3].value++
      } else {
        vipNumData[4].value++
      }
    }
    const { data: res3 } = await this.$http.get('allCustomers')
    for (let item of res3.data) {
      if (item.customer_gender == '男') {
        vipGenderData[0].value++
      } else {
        vipGenderData[1].value++
      }
    }
    console.log(this.vipGenderData)
    var color = [
      '#00ffff',
      '#00cfff',
      '#006ced',
      '#ffe000',
      '#ffa800',
      '#ff5b00',
      '#ff3000'
    ]
    for (var i = 0; i < vipNumData.length; i++) {
      this.vipData.push(
        {
          value: vipNumData[i].value,
          name: vipNumData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        },
        {
          value: 6,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        }
      )
    }
    for (var i = 0; i < vipGenderData.length; i++) {
      this.vipGender.push(
        {
          value: vipGenderData[i].value,
          name: vipGenderData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        },
        {
          value: 3,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        }
      )
    }
    var option2 = {
      backgroundColor: '#0A2E5D',
      color: color,
      title: {
        text: '会员等级占比',
        top: '10%',
        textAlign: 'center',
        left: '49%',
        textStyle: {
          color: '#fff',
          fontSize: 22,
          fontWeight: '400'
        }
      },
      graphic: {
        elements: [
          {
            type: 'image',
            z: 3,
            style: {
              width: 178,
              height: 178
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }
        ]
      },
      tooltip: {
        show: true
      },
      legend: {
        icon: 'circle',
        orient: 'horizontal',
        data: ['普通vip', '白银vip', '黄金vip', '钻石vip', '黑金vip'],
        right: 550,
        bottom: 20,
        align: 'right',
        textStyle: {
          color: '#fff'
        },
        itemGap: 20
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                  var percent = 0
                  var total = 0
                  for (var i = 0; i < vipNumData.length; i++) {
                    total += vipNumData[i].value
                  }
                  percent = ((params.value / total) * 100).toFixed(0)
                  if (params.name !== '') {
                    return (
                      '会员等级：' +
                      params.name +
                      '\n' +
                      '\n' +
                      '占百分比：' +
                      percent +
                      '%'
                    )
                  } else {
                    return ''
                  }
                }
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: this.vipData
        }
      ]
    }
    var option3 = {
      backgroundColor: '#0A2E5D',
      color: color,
      title: {
        text: '会员性别占比',
        top: '10%',
        textAlign: 'center',
        left: '49%',
        textStyle: {
          color: '#fff',
          fontSize: 22,
          fontWeight: '400'
        }
      },
      graphic: {
        elements: [
          {
            type: 'image',
            z: 3,
            style: {
              width: 178,
              height: 178
            },
            left: 'center',
            top: 'center',
            position: [100, 100]
          }
        ]
      },
      tooltip: {
        show: true
      },
      legend: {
        icon: 'circle',
        orient: 'horizontal',
        data: ['男', '女'],
        right: 550,
        bottom: 20,
        align: 'right',
        textStyle: {
          color: '#fff'
        },
        itemGap: 20
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                  var percent = 0
                  var total = 0
                  for (var i = 0; i < vipGenderData.length; i++) {
                    total += vipGenderData[i].value
                  }
                  percent = ((params.value / total) * 100).toFixed(0)
                  if (params.name !== '') {
                    return (
                      '会员性别：' +
                      params.name +
                      '\n' +
                      '\n' +
                      '占百分比：' +
                      percent +
                      '%'
                    )
                  } else {
                    return ''
                  }
                }
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: this.vipGender
        }
      ]
    }
    // 5.展示数据
    myChart.setOption(option)
    myChart2.setOption(option2)
    myChart3.setOption(option3)
  },
  methods: {
    handleData(arr, xdata, ydata, zdata) {
      //数据处理
      for (let item of arr) {
        //某个商品是否已经加入xdata，已存在则增数量，不存在直接加入
        if (xdata.indexOf(item.order_product) != -1) {
          for (let i = 0; i < xdata.length; i++) {
            if (item.order_product == xdata[i]) {
              ydata[i] += item.order_number
              zdata[i] += item.order_price
            }
          }
        } else {
          xdata.push(item.order_product)
          ydata.push(item.order_number)
          zdata.push(item.order_price)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.id {
  display: flex;
  flex-wrap: wrap;
}
</style>
